<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog title="添加用户" v-model="props.visible" @close="close">
    <el-divider />
    <el-form ref="ruleFormRef" style="width: 93%;" :model="formData" :rules="rules" label-width="auto" status-icon>
      <el-form-item label="用户手机区号" prop="area_code">
        <el-select v-model="formData.area_code" placeholder="Select" size="large" style="width: 240px">
          <el-option v-for="item in columns" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户手机号" prop="tel">
        <el-input v-model="formData.tel" autocomplete="off" placeholder="请输入用户手机号" @input="handleInput" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="formData.nickname" autocomplete="off" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="用户登录密码" prop="login_secret">
        <el-input v-model="formData.login_secret" type="password" autocomplete="off" show-password
          placeholder="请输入用户登录密码" />
      </el-form-item>
      <el-form-item label="确认登录密码" prop="login_secret_confirmation">
        <el-input v-model="formData.login_secret_confirmation" type="password" autocomplete="off" show-password
          placeholder="请输入确认登录密码" />
      </el-form-item>
    </el-form>
    <el-divider />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, } from "vue";
import { validateInput } from "@/utils/index";
import type { FormInstance } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['close', 'submit', 'update']);
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  area_code: [
    { required: true, message: '请选择用户手机区号', trigger: 'change' },
  ],
  tel: [
    { required: true, message: '请输入用户手机号', trigger: 'blur' },
  ],
  nickname: [
    {
      required: true,
      message: '请输入用户昵称',
      trigger: 'blur',
    },
  ],
  login_secret: [
    {
      required: true,
      message: '请输入用户登录密码',
      trigger: 'blur',
    },
    {
      min: 6,
      message: '密码长度至少为6位',
      trigger: 'blur'
    }
  ],
  login_secret_confirmation: [
    {
      required: true,
      message: '请输入确认登录密码',
      trigger: 'blur'
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== formData.value.login_secret) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const columns = ref([{
  label: 'Taiwan (台灣) +886',
  value: '+886'
}, {
  label: 'India (भारत) +91',
  value: '+91'
}, {
  label: 'United States +1',
  value: '+1'
}, {
  label: 'Australia +61',
  value: '+61'
}, {
  label: 'Singapore +65',
  value: '+65'
}, {
  label: 'United Kingdom +44',
  value: '+44'
}, {
  label: 'Japan (日本) +81',
  value: '+81'
}, {
  label: 'South Korea (대한민국) +82',
  value: '+82'
}, {
  label: 'Indonesia +62',
  value: '+62'
}, {
  label: 'Malaysia +60',
  value: '+60'
}]);

const formData = ref({
  area_code: "+886", // 手机区号
  tel: "", // 带区号的手机号
  nickname: "", // 昵称
  login_secret: "", // 登录密码
  login_secret_confirmation: "", // 确认登录密码
});

// 
const close = () => {
  emit('close', false);
};

const handleInput = (event: any) => {
  let input = validateInput(event as string);

  formData.value.tel = input;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      emit('submit', formData.value)
    }
  })
};
</script>

<style></style>
